<template>
  <el-dialog title="待处理增值服务列表" :visible.sync="visible" width="width:1000px" @close="onClose" append-to-body>
    <XmTable :config="tableConfig" :noWatchParams="noWatchParams" class="table" ref="table">
      <div slot="filter">
        <el-tabs v-model="noWatchParams.addedServices" @tab-click="handleClick">
          <el-tab-pane v-for="item in typeList" :key="item.code" :name="item.code">
            <div slot="label">
              <span>{{item.dictValue || '-'}}</span>
              <el-badge :value="item.number" :hidden="item.number == 0" :max="99"></el-badge>
            </div>
          </el-tab-pane>
        </el-tabs>
        <el-form class="fl" :inline="true" ref="form" :model="noWatchParams">
          <el-form-item label="后台单号">
            <el-input v-model="noWatchParams.xmbzNo" size="small" placeholder="后台单号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search" size="small" icon="el-icon-search" style="margin-left: 10px;">搜索
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <template slot="column-type" slot-scope="{data}">
        <span>{{addedServicesTypeMap[data.type]}}</span>
      </template>
      <template slot="column-operate" slot-scope="{data}">
        <el-button type="primary" size="small" @click="approval(data)">
          处理
        </el-button>
      </template>
    </XmTable>
  </el-dialog>
</template>

<script>
import {
  tableConfig, // 订单日志
} from './config'
import { mapGetters } from "vuex";

const whileCodeList = ["MAGIC", "FLOWER", "GIANT_PANDA", "DELIVERY_MANAGER", "MAKE"]

export default {
  props: {
    countObject: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      tableConfig,
      visible: false,
      noWatchParams: {
        xmbzNo: '',
        addedServices: ''
      },
      typeList: []
    };
  },
  computed: {
    ...mapGetters(['addedServicesTypeMap', 'addedServicesTypeList']),
  },
  watch: {
    addedServicesTypeList() {
      this.setTypeList()
      this.setCount()
    }
  },
  methods: {
    async show() {
      this.visible = true
      this.setCount()
      this.initParams()
      this.$nextTick(() => {
        this.fetch()
      })
    },
    setTypeList() {
      this.typeList = JSON.parse(JSON.stringify(this.addedServicesTypeList.filter(item => whileCodeList.includes(item.code))))
    },
    setCount() {
      if (this.typeList && this.countObject) {
        this.typeList.forEach(item => {
          item['number'] = this.countObject[item.code] || 0
        })
      }
    },
    initParams() {
      this.noWatchParams.addedServices = this.typeList[0].code
      this.noWatchParams.xmbzNo = ''
    },
    hide() {
      this.visible = false
    },
    approval(data) {
      const { href } = this.$router.resolve({
        path: '/added-page/approval',
        query: {
          orderId: data.orderId,
          type: data.type,
        }
      })
      window.open(href, href);
    },
    fetch() {
      this.$refs.table && this.$refs.table.fetch()
    },
    handleClick() {
      this.noWatchParams.xmbzNo = ''
      this.fetch()
    },
    search() {
      this.fetch()
    },
    onClose() {
      this.$emit('close')
    },
  },
  created() {
    this.setTypeList()
  }
};
</script>
<style lang="scss" scoped>
</style>